<template>
	<view class="content">
		<view class="productphotos">
			<image :src="content.cover" mode=""></image>
		</view>
		<view class="productcontent">
			<view class="name">
				{{content.title}}
			</view>
			<view class="number">
				<view class="people">
				</view>
				<view class="money" v-if="content.price>0&&isVip==0">
					<text>￥</text>
					{{content.price}}
				</view>
				<!-- <view class="money" v-else> 免费 </view> -->
			</view>
			<view class="teacher" v-if="!teacher">
				<view class="briefintroduction"> 目前没有老师 </view>
			</view>
			<view class="teacher" v-else>
				<view class="teacherinformation">
					<view class="teacherimg">
						<image :src="teacher.head" mode=""></image>
					</view>
					<view class="teachername">
						{{teacher.name}}
					</view>
				</view>
				<view class="briefintroduction">
					<rich-text :nodes="teacher.detail"></rich-text>
				</view>
			</view>
			<view class="courseclick">
				<view class="list" v-for="(item,index) in itemList" :key="index"
					:class="{ select: selectedIdx === index }" @click="selectItem(index)">
					<view class="price">
						<view class="pricea">
							{{item.name}}
						</view>
						<view class="plus">
						</view>
					</view>
				</view>
			</view>
			<view class="information" v-if="selectedIdx==0">
				<!-- <view class="xiangmubox">
					<rich-text class="notice-content" style="font-size:0"
						:nodes="format(goodsInfo.goodDetail)"></rich-text>
				</view> -->
				<view class="coursetext">
					<rich-text :nodes="content.detail"></rich-text>
					<!-- {{}} -->
				</view>
				<view class="courseimg">
					<image :src="item" :style="{height: heights[index] + 'rpx'}" v-for="(item, index) in imag"
						:key="index"></image>
				</view>
			</view>
			<view class="information" v-if="selectedIdx==1">
				<view class="name">
					<view class="goods">
						<view class="cheng">
						</view> 课程目录
					</view>
				</view>
				<view class="common"> 共{{kecle}}章，{{count}}节课 </view>
				<uni-collapse accordion v-model="accordionVal" @change="change">
					<uni-collapse-item :title="item.title" v-for="(item,index) in kec" :key="index">
						<view class="coursename" v-for="(ite,inde) in item.sectionVoList" :key="inde">
							<view class="coursenlist" v-if="ite.status == 1"
								@click="video(ite.videoUri,ite.title,ite.imageUri,ite.sid)">
								<view class="upper">
									<view class="introduce">
										{{ite.title}}
									</view>
								</view>
								<view class="below">
									<view class="free" v-if="ite.status == 1"> 试看 </view>
									<view class="duration">
										{{ formatDuration(ite.duration) }}
									</view>
								</view>
							</view>
							<view class="coursenlist" v-else>
								<view class="upper">
									<view class="introduce">
										{{ite.title}}
									</view>
								</view>
								<view class="below">
									<!-- <view class="free" >
										免费试看
									</view> -->
									<view class="duration">
										{{ formatDuration(ite.duration) }}
									</view>
								</view>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
			<view class="information" v-if="selectedIdx==2">
				<view class="name">
					<view class="goods">
						<view class="cheng">
						</view> 课程评价
					</view>
				</view>
				<view class="score">
					<view class="orangefive" v-if="average">
						{{average}}
					</view>
					<view class="orangefive" v-else> 暂无评分 </view>
					<view class="fullmarks"> 满分5.0分 </view>
				</view>
				<view class="scoreimg">
					<image v-for="ite,index in star.slice(0, average)" :src="ite.image" mode=""></image>
				</view>
				<view class="scoreul">
					<view class="scoreli" v-for="(item,index) in scorelist" :key="index">
						<view class="scoreliimg">
							<image :src="item.memberPhoto" mode=""></image>
						</view>
						<view class="scoreliinformation">
							<view class="scoreinformationnaem">
								<view class="scoreliinformationnaem">
									{{item.memberName}}
								</view>
								<view class="scoretime">
									{{item.createTime}}
								</view>
							</view>
							<view class="scoreliimgx" v-if="item.score">
								<image v-for="ite,index in star.slice(0, item.score)" :src="ite.image" mode=""></image>
							</view>
							<!-- 	<view class="scorelievaluate">
								细致易懂有深度
							</view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="lowerpart">
			<view class="lowerpartimg">
				<view class="collect">
					<image v-if="content.isCollect == 1" src="../../static/311.png" mode="" @click="addCollecta(2)">
					</image>
					<image v-if="content.isCollect == 2" src="../../static/313.png" mode="" @click="addCollecta(1)">
					</image>
					<view class="collecttext"> 收藏 </view>
				</view>
				<!-- 	<view class="collect" @click="kef">
					<image src="../../static/318.png" mode=""></image>
					<view class="collecttext"> 咨询 </view>
				</view> -->
			</view>
			<view class="lowerparttext">
				<!-- 				<view class="shoppingcart">
					加入购物车
				</view> -->
				<view class="purchase" @click="open"> 确认 </view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="22px 22px 0 0">
			<view class="exchange">
				<view class="fillin"> 填写兑换码 <text @click="courseorder">跳过</text>
				</view>
				<view class="Inputbox">
					<input type="text" v-model="redemptioncode" />
				</view>
				<view class="click">
					<button class="cancel" @click="close">取消</button>
					<button class="confirm" @click="createExchangeOrdera">确认</button>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupa" type="bottom" border-radius="22px 22px 0 0">
			<view class="exchange">
				<view class="success"> 兑换成功 <image src="../../static/322.png" mode=""></image>
				</view>
				<image class="answer" src="../../static/319.png" mode=""></image>
			</view>
		</uni-popup>
		<uni-popup ref="popupb" type="bottom" border-radius="22px 22px 0 0">
			<view class="exchange">
				<view class="fail"> 兑换失败 <image src="../../static/322.png" mode=""></image>
				</view>
				<image class="answer" src="../../static/321.png" mode=""></image>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import {
		getTeacherById, //老师信息
		addCollect, //收藏
		cataloguelist, //课程目录
		getScore, //评分列表
		getAvgScore, //平均评分
		createExchangeOrder, //兑换码兑换商品
		getById,
		getByType
	} from "@/request/api.js"
	export default {
		data() {
			return {
				itemList: [{
					name: '课程介绍'
				}, {
					name: '课程目录'
				}, {
					name: '课程评价'
				}],
				selectedIdx: 0,
				accordionVal: '',
				content: {},
				imag: [],
				teacher: {}, //老师信息
				isClickDisabled: false, //限制多次点击收藏
				redemptioncode: "",
				count: 0,
				courseId: '',
				average: '',
				pageNo: 1,
				total: '',
				star: [{
					image: '../../static/406.png'
				}, {
					image: '../../static/406.png'
				}, {
					image: '../../static/406.png'
				}, {
					image: '../../static/406.png'
				}, {
					image: '../../static/406.png'
				}, ],
				scorelist: [],
				kec: {},
				kecle: '0',
				offsetamount: {},
				heights: [], // 存储图片高度的数组
				isVip: 0
			}
		},
		onReachBottom() {
			console.log(111);
			if (this.total <= this.scorelist.length) {
				// uni.showToast({
				// 	title: '已加载全部数据',
				// 	icon: "none"
				// });
			} else {
				this.pageNo++;
				this.getScorea()
			}
		},
		onLoad(e) {
			this.courseId = e.courseId
			console.log(e.courseId);
		},
		onShow() {
			if (uni.getStorageSync('userInfo')) {
				this.isVip = uni.getStorageSync('userInfo').isVip
			}
			getApp().globalData.certificate = ''
			if (this.courseId) {
				this.getByIda()
			}
			console.log(getApp().globalData.details);
			this.content = getApp().globalData.details
			console.log(this.content, "详情");
			this.getTeacherByIda()
			if (this.content.images) {
				this.imag = this.content.images.split(',');
			}
			this.cataloguelista()
		},
		// computed: {
		// 	// 计算属性，将图片URL转换为高度数组
		// 	imageHeights() {
		// 		return this.imag.map((item, index) => {
		// 			const img = new Image();
		// 			img.src = item;
		// 			return img.height;
		// 		});
		// 	}
		// },
		mounted() {
			// 在 mounted 钩子中将计算得到的高度数组赋值给 heights
			Promise.all(this.imag.map(this.getImageInfo)).then((heights) => {
				this.heights = heights;
			}).catch((error) => {
				console.error('获取图片信息出错:', error);
			});
		},
		methods: {
			kef() {
				plus.share.getServices(res => {
					const wechat = res.find(i => i.id === 'weixin')
					if (wechat) {
						wechat.openCustomerServiceChat({
							corpid: "wwa4109901095808d2", //第三步获取
							url: "https://work.weixin.qq.com/kfid/kfcec94590fae8480a4"
						}, src => {
							console.log("success:")
						}, err => {
							console.log("error:")
						})
					} else {
						uni.showToast({
							title: '当前环境不支持',
							icon: "error"
						});
					}
				});
			},
			getImageInfo(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: (res) => {
							const {
								width,
								height
							} = res;
							resolve(height);
						},
						fail: (error) => {
							reject(error);
						}
					});
				});
			},
			dial() {
				let than = this
				console.log('aaa');
				uni.makePhoneCall({
					phoneNumber: '15136111076',
					success: function() {
						console.log('拨打电话成功');
						// than.fltCustomerBaseedits(item)
					},
					fail: function(err) {
						console.log('拨打电话失败：' + JSON.stringify(err));
					}
				});
			},
			getScorea() {
				this.scorelist = []
				uni.showLoading({
					title: '加载中...'
				})
				getScore({
					courseId: this.content.id,
					pageNo: this.pageNo,
				}).then(res => {
					console.log(res);
					this.scorelist = this.scorelist.concat(res.result.records)
					this.total = res.result.total; //数据总条数
					uni.hideLoading()
				})
			},
			getByIda() {
				getById({
					courseId: this.courseId
				}).then(res => {
					console.log(res, '1111111');
					getApp().globalData.details = res.result
					this.content = res.result
					this.cataloguelista()
				})
			},
			formatDuration(seconds) {
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60);
				const remainingSeconds = seconds % 60;
				return `${hours}小时 ${minutes}分钟 ${remainingSeconds}秒`;
			},
			getTotalCount() {
				let counta = 0;
				console.log(this.kec);
				this.kec.forEach(item => {
					if (item && item.sectionVoList) {
						counta += item.sectionVoList.length;
					}
				});
				console.log(counta);
				this.count = counta;
				return counta;
			},
			open() {
				//上架
				getByType({
					type: '3'
				}).then(res => {
					if (res.result.content == 'true') {
						this.courseorder()
					} else {
						console.log(22);
						this.$refs.popup.open('bottom')
					}
				})
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			},
			close() {
				this.$refs.popup.close()
			},
			opena() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popupa.open('bottom')
			},
			openb() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popupb.open('bottom')
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			change(e) {
				console.log(e);
			},
			getAvgScorea() {
				let that = this
				console.log(that.content.id);
				getAvgScore({
					courseId: that.content.id
				}).then(res => {
					this.average = res.result
					console.log(res);
				})
			},
			//兑换码兑换商品
			createExchangeOrdera() {
				let that = this
				let exchange = {
					cdKey: that.redemptioncode, //兑换码信息
					courseCover: that.content.cover, //课程封面
					courseId: that.content.id, //课程id
					courseTitle: that.content.title, //课程标题
					orderAmount: that.content.price, //订单金额
					memberId: uni.getStorageSync('userInfo').id
				}
				createExchangeOrder(exchange).then(res => {
					console.log(res, '兑换商');
					if (res.code == 500) {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					if (res.code == 200) {
						uni.showToast({
							title: '兑换成功',
							icon: 'none'
						})
					}
				})
			},
			cataloguelista() {
				cataloguelist({
					courseId: this.content.id,
					type: '1'
				}).then(res => {
					console.log(res, 'aaaaaaaa');
					if (res.code == 200) {
						this.kec = res.result
						this.kecle = this.kec.length
						this.getTotalCount()
					}
				})
			},
			addCollecta(sta) {
				if (this.isClickDisabled) return; // 如果禁用点击，则不执行后续操
				this.isClickDisabled = true;
				// 禁用点击
				setTimeout(() => {
					uni.showToast({
						title: '请勿连续点击',
						icon: 'none'
					})
					this.isClickDisabled = false; // 三秒后允许点击
				}, 3000);
				addCollect({
					courseId: this.content.id,
					memberId: uni.getStorageSync('userInfo').id,
					status: sta,
					type: 1,
					title: this.content.title,
					price: this.content.price,
					goodsImg: this.content.cover,
				}).then(res => {
					console.log(res, '成功');
					if (sta == 1) {
						uni.showToast({
							title: '收藏成功',
							icon: 'none'
						})
					}
					if (sta == 2) {
						uni.showToast({
							title: '取消收藏',
							icon: 'none'
						})
					}
				})
				if (sta == 1) {
					console.log('aa');
					this.content.isCollect = 1
				}
				if (sta == 2) {
					console.log('aa');
					this.content.isCollect = 2
				}
			},
			format(html) {
				var GRT = [
					// img 样式
					['img', "max-width:100%;height:auto;"],
				];
				for (let i = 0; i < GRT.length; i++) {
					html = html.replace(new RegExp('<' + GRT[i][0] + '>|<' + GRT[i][0] + ' (.*?)>', 'gi'), function(word) {
						// 分析 dom 上是否带有 style=""
						if (word.indexOf('style=') != -1) {
							var regIn = new RegExp('<' + GRT[i][0] + '(.*?)style="(.*?)"(.*?)(/?)>', 'gi');
							return word.replace(regIn, '<' + GRT[i][0] + '$1style="$2 ' + GRT[i][1] + '"$3$4>');
						} else {
							var regIn = new RegExp('<' + GRT[i][0] + '(.*?)(/?)>', 'gi');
							return word.replace(regIn, '<' + GRT[i][0] + '$1 style="' + GRT[i][1] + '$2">');
						}
					});
				}
				return html;
			},
			getTeacherByIda() {
				getTeacherById({
					teacherId: this.content.tid
				}).then(res => {
					this.teacher = res.result
				})
			},
			//去下单页面
			courseorder() {
				let isLogin = uni.getStorageSync('token')
				if (!isLogin) {
					uni.showToast({
						title: '请先登录',
						icon: "none"
					})
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/index'
						})
					}, 1500)
					return;
				}
				this.$refs.popup.close()
				uni.navigateTo({
					url: '/pages/details/courseorder'
				})
			},
			//去下单页面
			video(item, title, imge, id) {
				console.log('挑战');
				uni.navigateTo({
					url: '/pages/index/video?mv=' + item + "&title=" + title + "&image=" + imge + "&id=" + id
				})
			},
			selectItem(index) {
				this.selectedIdx = index;
				console.log(index, '代码块');
				if (index == 1) {
					this.cataloguelista()
				}
				if (index == 2) {
					this.getAvgScorea()
					this.getScorea()
				}
			},
		}
	}
</script>
<style lang="scss" scoped>
	.u-collapse-content {
		color: $u-tips-color;
		font-size: 14px;
	}

	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		background: #f7f7f7;
	}

	.productphotos {
		width: 100%;
		height: 710rpx;

		image {
			width: 100%;
			height: 710rpx;
		}
	}

	.productcontent {
		position: relative;
		z-index: 2;
		border-radius: 20rpx 20rpx 0 0;
		top: -100rpx;
		background: #fff;
		padding: 12rpx 28rpx;
		padding-top: 70rpx;

		.name {
			color: #333333;
			font-size: 32rpx;
			font-weight: 700;
		}

		.number {
			margin-top: 26rpx;
			margin-bottom: 14rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.people {
				color: #9e9e9e;
				font-size: 24rpx;
				font-weight: 500;
			}

			.money {
				color: #d73c38;
				font-size: 36rpx;
				font-weight: 900;

				text {
					color: #d73c38;
					font-size: 24rpx;
					font-weight: 900;
				}
			}
		}

		.teacher {
			display: flex;
			padding-top: 24rpx;
			padding-bottom: 14rpx;
			// align-items: center;
			border-top: 4rpx solid #d8d8d8;
			border-bottom: 4rpx solid #d8d8d8;

			.teacherinformation {
				text-align: center;

				.teacherimg {
					width: 98rpx;
					height: 98rpx;
					margin-bottom: 10rpx;

					image {
						width: 98rpx;
						height: 98rpx;
					}
				}

				.teachername {
					color: #9e9e9e;
					font-size: 20rpx;
					font-weight: 500;
				}
			}

			.briefintroduction {
				margin-top: 20rpx;
				margin-left: 22rpx;
				color: #333333;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.courseclick {
			margin-top: 12rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.list {
				// margin-bottom: 50rpx;
				border-radius: 20rpx;
				padding-bottom: 16rpx;
				display: flex;
				justify-content: space-between;
				// text-align: center;
				font-size: 36rpx;
				margin-right: 36rpx;
				color: #979797;
				font-size: 28rpx;
				font-weight: 700;

				.name {
					color: #333333;
					font-size: 24rpx;
					font-weight: 500;
					padding: 0 8rpx;
				}

				.price {
					position: relative;

					.pricea {}
				}
			}

			.select {
				margin-right: 36rpx;
				color: #333;
				display: flex;
				font-size: 28rpx;
				font-weight: 700;

				.plus {
					width: 58rpx;
					height: 6rpx;
					border-radius: 160rpx;
					background: #ff9d34;
					position: absolute;
					bottom: -15rpx;
					left: 50%;
					transform: translateX(-50%);
				}
			}
		}

		.information {
			padding-bottom: 150rpx;

			.coursetext {
				color: #333333;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 20rpx;
				margin-bottom: 20rpx;
			}

			.courseimg {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// justify-content: center;
				width: 700rpx;

				image {
					width: 700rpx;
				}
			}

			.name {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.goods {
					display: flex;
					align-items: center;

					.cheng {
						width: 8rpx;
						height: 38rpx;
						border-radius: 430rpx;
						background: #ff9c34;
						margin-right: 12rpx;
					}
				}
			}

			.common {
				color: #999999;
				font-size: 24rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}
	}

	.coursename {
		background: #f6f6f6;

		.coursenlist {
			padding: 30rpx 38rpx 32rpx 32rpx;
			border-bottom: 4rpx solid #f1f1f1;

			.upper {
				display: flex;
				align-items: center;
				color: #333333;
				font-size: 32rpx;
				font-weight: 500;

				.joint {
					margin-right: 18rpx;
				}
			}

			.below {
				display: flex;
				margin-left: 108rpx;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;

				.free {
					width: 76rpx;
					height: 30rpx;
					border-radius: 16rpx;
					background: #f05555;
					text-align: center;
					line-height: 30rpx;
					color: #ffffff;
					font-size: 16rpx;
					font-weight: 400;
				}

				.duration {
					color: #999999;
					font-size: 24rpx;
					font-weight: 500;
				}
			}
		}
	}

	.score {
		display: flex;
		align-items: flex-end;
		margin-top: 22rpx;

		.orangefive {
			color: #ff9c34;
			font-size: 72rpx;
			font-weight: 700;
			margin-right: 24rpx;
		}

		.fullmarks {
			color: #9e9e9e;
			font-size: 28rpx;
			font-weight: 400;
			margin-bottom: 10rpx;
		}
	}

	.scoreimg {
		display: flex;
		align-items: center;
		margin-top: 14rpx;
		border-bottom: 4rpx solid #f6f6f6;
		padding-bottom: 14rpx;

		image {
			width: 56rpx;
			height: 56rpx;
			margin-right: 14rpx;
		}
	}

	.scoreul {
		.scoreli {
			padding-bottom: 18rpx;
			border-bottom: 4rpx solid #f6f6f6;
			display: flex;
			margin-top: 25rpx;

			.scoreliimg {
				width: 102rpx;
				height: 102rpx;
				margin-right: 14rpx;

				image {
					width: 102rpx;
					height: 102rpx;
				}
			}

			.scoreliinformation {
				.scoreinformationnaem {
					display: flex;
					align-items: center;

					.scoreliinformationnaem {
						color: #333333;
						font-size: 28rpx;
						font-weight: 400;
						margin-right: 15rpx;
					}

					.scoretime {
						color: #999999;
						font-size: 24rpx;
						font-weight: 400;
					}
				}

				.scoreliimgx {
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					display: flex;
					align-items: center;

					image {
						width: 30.18rpx;
						height: 30rpx;
					}
				}

				.scorelievaluate {
					color: #333333;
					font-size: 24rpx;
					font-weight: 400;
				}
			}
		}
	}

	.lowerpart {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		z-index: 10;
		background: #ffffff;
		border-top: 4rpx solid #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 26rpx 24rpx 30rpx 0rpx;
		box-sizing: border-box;

		.lowerpartimg {
			display: flex;
			align-items: center;

			.collect {
				text-align: center;
				margin-left: 56rpx;

				image {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.lowerparttext {
			display: flex;

			.shoppingcart {
				width: 224rpx;
				height: 84rpx;
				border-radius: 20rpx 0 0 20rpx;
				opacity: 1;
				background: #ff9c33;
				color: #ffffff;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
				font-weight: 500;
			}

			.purchase {
				width: 224rpx;
				height: 84rpx;
				border-radius: 20rpx;
				opacity: 1;
				background: #d73c38;
				color: #ffffff;
				text-align: center;
				line-height: 84rpx;
				font-size: 28rpx;
				font-weight: 500;
			}
		}
	}

	.exchange {
		width: 100%;
		height: 500rpx;
		background: #fff;
		border-radius: 20rpx 20rpx 0 0;
		text-align: center;
		padding-top: 38rpx;
		position: relative;

		.fillin {
			color: #333333;
			font-size: 36rpx;
			font-weight: 700;

			text {
				position: absolute;
				top: 54rpx;
				right: 42rpx;
				color: #9e9e9e;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.success {
			color: #ff9c34;
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 22rpx;

			image {
				position: absolute;
				top: 54rpx;
				right: 42rpx;
				width: 32rpx;
				height: 32rpx;
				color: #9e9e9e;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.fail {
			color: #d73c38;
			font-size: 36rpx;
			font-weight: 700;
			margin-top: 22rpx;

			image {
				position: absolute;
				top: 54rpx;
				right: 42rpx;
				width: 32rpx;
				height: 32rpx;
				color: #9e9e9e;
				font-size: 24rpx;
				font-weight: 500;
			}
		}

		.answer {
			margin-top: 34rpx;
			width: 280rpx;
			height: 280rpx;
		}

		.Inputbox {
			margin-top: 50rpx;
			width: 668rpx;
			height: 82rpx;
			border-radius: 20rpx;
			background: #f6f6f6;
			margin-left: 40rpx;
			margin-bottom: 74rpx;
			// input {
			// 	width: 668rpx;
			// 	height: 82rpx;
			// 	border-radius: 20rpx;
			// 	background: #f6f6f6;
			// }
		}

		.click {
			display: flex;

			.cancel {
				width: 228rpx;
				height: 58rpx;
				border-radius: 474rpx;
				background: #ffedda;
				color: #999999;
				text-align: center;
				font-size: 28rpx;
				line-height: 58rpx;
				font-weight: 500;
			}

			.confirm {
				width: 228rpx;
				height: 58rpx;
				border-radius: 56rpx;
				background: #ff9c34;
				color: #ffffff;
				text-align: center;
				font-size: 28rpx;
				line-height: 58rpx;
				font-weight: 500;
			}
		}
	}

	button {
		border: none;
	}

	button {
		outline: none;
	}
</style>